<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		
	</head>
	<body style="width: 2000px; height: 2000px;">
		<div id="box1"></div>
		<script type="text/javascript">
			/*
				当鼠标滚轮向下滚动时，box1变长
				当滚轮向上滚动时，box1变短
			*/
		   var box1 = document.getElementById("box1");
		   /*
			onmousewheel鼠标滚轮滚动事件，会在滚轮滚动时触发，
				火狐不兼容
				
				在火狐中需要DOMMouseScroll
					注意该事件需要addEventListener()函数来绑定
		   */
		   box1.onmousewheel = function(event){
			   // alert(1);
			   //先判断滚轮的滚动方向
			   event = event || window.event;
			   // event.wheelData可以判断滚动的方法
			   // 往上滚是120
			   // 向下滚是-120
			   // whellData这个值不看大小只看正负
			   //whellData在火狐中不支持
			   //在火狐中使用detail
			   //往上滚是-3
			   //往下滚是3
			   //datail的值不看大小只看正负
			   if(event.wheelDelta > 0 || event.detail < 0){
				   // alert("向上滚");
				   box1.style.height = box1.clientHeight - 10 +"px";
			   }else{
				   // alert("向下滚");
				   box1.style.height = box1.clientHeight + 10 +"px";
			   }
			   event.preventDefault && event.preventDefault();
			   return false;
		   }
		   /*
				当滚轮滚动时，当浏览器由滚动条，浏览器会滚着滚动，
				这是浏览器的默认行为，如果不希望发生，则可以取消默认行为。
				retur false
				但是在火狐中我们时使用addEventListener()方法绑定相应函数，取消默认行为时不能使用return false
				需要使用event.preventDefault()来取消默认行为
				但是ie8不支持event.preventDefault()，会直接报错
				使用event.preventDefault && event.preventDefault();
				来解决兼容问题
				
		   */
		   bind(box1 , "DOMMouseScroll" , function(){
			   // alert(1);
			   
		   })
		   
		   /*
			简便写法
				box1.onmousewheel = function(){
				   alert(1);   
				}
				bing(box1 , "DOMMuoseScroll" , box1.onmousewheel);
		   */
		   function bind( obj , eventStr , callback ){
		   			   // alert(1);
		   				if(obj.addEventListener){
		   				//大部分浏览器的兼容方式
		   					alert(1)
		   					obj.addEventListener(eventStr , callback , false);
		   				}else{
		   				//IE8及以下的
		   				//call方式可以修改this的值
		   					obj.attachEvent("on"+eventStr , function(){
		   						// 在匿名函数中调用回调函数
		   						callback.call(obj);
		   					});
		   				}
		   }
		</script>
	</body>
</html>
